<div class="annotated-examples">
<h2>Basic examples</h2>
<p>
  Here is an example of a list with List.js applied. List.js can be used in
  three different ways. It can be on existing HTML, it can create it's own
  HTML or a combination of both methods.
</p>
<div class="annotated-list" id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">Sort by name</button>
  <button class="sort" data-sort="born">Sort by born</button>
  <div class="list">
    <div>
      <h3 class="name">Jonny Strömberg</h3>
      <p class="born">1990</p>
    </div>
    <div>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
    </div>
    <div>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
    </div>
    <div>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
    </div>
  </div>
</div>

<h3>Apply List.js on existing HTML</h3>
<div class="columns">
  <div class="column">
<pre><code id="existing-html">&lt;div id="users">

&lt;!-- class="search" automagically makes an input a search field. -->
  &lt;input class="search" placeholder="Search" />
&lt;!-- class="sort" automagically makes an element a sort buttons. The date-sort value decides what to sort by. -->
  &lt;button class="sort" data-sort="name">
    Sort
  &lt;/button>

&lt;!-- Child elements of container with class="list" becomes list items -->
  &lt;ul class="list">
    &lt;li>
&lt;!-- The innerHTML of children with class="name" becomes this items "name" value -->
      &lt;h3 class="name">Jonny Stromberg&lt;/h3>
      &lt;p class="born">1986&lt;/p>
    &lt;/li>
    &lt;li>
      &lt;h3 class="name">Jonas Arnklint&lt;/h3>
      &lt;p class="born">1985&lt;/p>
    &lt;/li>
    &lt;li>
      &lt;h3 class="name">Martina Elm&lt;/h3>
      &lt;p class="born">1986&lt;/p>
    &lt;/li>
    &lt;li>
      &lt;h3 class="name">Gustaf Lindqvist&lt;/h3>
      &lt;p class="born">1983&lt;/p>
    &lt;/li>
  &lt;/ul>

&lt;/div></code></pre>
  </div>
  <div class="column">
<pre><code id="existing-js">var options = {
  valueNames: [ 'name', 'born' ]
};

var userList = new List('users', options);</code></pre>
  </div>
</div>

<h3>Apply List.js on existing HTML and then add items</h3>
<div class="columns">
  <div class="column">
<pre><code id="add-html">&lt;div id="users">

  &lt;input class="search" placeholder="Search" />
  &lt;button class="sort" data-sort="name">
    Sort
  &lt;/button>

  &lt;ul class="list">
&lt;!-- This, the first element in the list, will be used as template for new items. -->
    &lt;li>
      &lt;h3 class="name">Jonny Stromberg&lt;/h3>
      &lt;p class="born">1986&lt;/p>
    &lt;/li>
  &lt;/ul>

&lt;/div>
</code></pre>
  </div>
  <div class="column">
<pre><code id="add-js">var options = {
  valueNames: [ 'name', 'born' ]
};

// These items will be added to the list on initialization.
var values = [
  {
    name: 'Jonas Arnklint',
    born: 1985
  },
  {
    name: 'Martina Elm',
    born: 1986
  }
];

var userList = new List('users', options, values);

// It's possible to add items after list been initiated
userList.add({
  name: 'Gustaf Lindqvist',
  born: 1983
});</code></pre>
  </div>
</div>



<h3>Make List.js create a list from scratch</h3>
<div class="columns">
  <div class="column">
<pre><code id="new-html">&lt;div id="users">

  &lt;input class="search" placeholder="Search" />
  &lt;button class="sort" data-sort="name">
    Sort
  &lt;/button>

  &lt;ul class="list">&lt;/ul>

&lt;/div></code></pre>
  </div>
  <div class="column">
<pre><code id="new-js" class="javascript">var options = {
  valueNames: [ 'name', 'born' ],
  // Since there are no elements in the list, this will be used as template.
  item: '&lt;li>&lt;h3 class="name">&lt;/h3>&lt;p class="born">&lt;/p>&lt;/li>'
};

var values = [
  {
    name: 'Jonny Strömberg',
    born: 1986
  },
  {
    name: 'Jonas Arnklint',
    born: 1985
  },
  {
    name: 'Martina Elm',
    born: 1986
  }
];

var userList = new List('users', options, values);

userList.add({
  name: 'Gustaf Lindqvist',
  born: 1983
});
</code></pre>
  </div>
</div>
</div>
